<template>
  <div class="literatureManage flex">
    <div class="literature_l flex_1">
      <div class="literature_header flex jc_sb">
        <div class="header_l flex">
          <div :class="['header_nav pointer', currentHeadNavIndex === index ? 'active_head_nav fw' : '']"
            v-for="(item, index) in headNavs" :key="index" @click="headNavClick(item, index)">{{ item.label }}</div>
        </div>
        <div class="header_r flex align_items_ctr">
          <div class="search_box" ref="searchBoxRef">
            <el-input v-model="listQuery.searchKey" placeholder="输入文献" @focus="searchFocus" @blur="searchBlur">
              <i v-if="!isSearchFocus" slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button v-if="isSearchFocus" slot="append">搜索</el-button>
            </el-input>
          </div>
          <div class="fileStatus">
            <el-select v-model="listQuery.fileStatus">
              <el-option v-for="(item, index) in fileStatus" :key="index" :label="item.label"
                :value="item.label"></el-option>
            </el-select>
          </div>
          <div class="fileViewTypes flex">
            <div :class="['fileViewType pointer', currentFileViewIndex === index ? 'active_fileView fw' : '']"
              v-for="(item, index) in fileViewType" :key="index" @click="fileViewClick(item, index)">
              {{ item.label }}
            </div>
          </div>
          <el-button>导入</el-button>
        </div>
      </div>
      <div class="literature_table">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="文献标题"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="作者"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="刊名">
          </el-table-column>
          <el-table-column
            prop="address"
            label="参考文献">
          </el-table-column>
          <el-table-column
            prop="address"
            label="最近操作">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="literature_r"></div>
  </div>
</template>

<script>
export default {
  name: 'literatureManage',
  data () {
    return {
      currentHeadNavIndex: 0,
      headNavs: [
        { label: '全部文献' },
        { label: '最近打开' },
        { label: '我的收藏' },
      ],
      listQuery: {
        searchKey: '',
        fileStatus: '全部文献'
      },
      isSearchFocus: false,
      fileStatus: [
        { label: '全部文献' },
        { label: '有全文' },
        { label: '无全文' },
      ],
      currentFileViewIndex: 0,
      fileViewType: [
        { label: '文件视图' },
        { label: '内容视图' },
        {
          label: '知识卡片', children: [
            { label: '图标公式视图' },
            { label: '引文视图' },
            { label: '知识卡片' },
          ]
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    headNavClick (item, index) {
      this.currentHeadNavIndex = index
    },
    fileViewClick (item, index) {
      this.currentFileViewIndex = index
    },
    searchFocus () {
      this.$refs.searchBoxRef.style.width = '300px'
      this.isSearchFocus = true
    },
    searchBlur () {
      if (!this.listQuery.searchKey) {
        this.$refs.searchBoxRef.style.width = '150px'
        this.isSearchFocus = false
      }
    }
  }
}
</script>
<style lang="less">
.literatureManage {

  .el-input__inner {
    background: #e8e7f9;
    border: 0;
  }

  .el-input-group__append {
    background: #e8e7f9;
    border: 0;

    button.el-button {
      background: var(--themeColor);
      color: #fff;
      border-radius: 10px;
      height: 30px;
      padding: 0 10px;
    }
  }
}
</style>
<style lang="less" scoped>
.literatureManage {
  padding: 20px 100px !important;

  .literature_l {
    min-width: 1100px;
    margin: 0 auto;
    width: 0;

    /* ✅ 修复 el-table 不随窗口收缩的问题 */
    .literature_header {
      border-bottom: 1px solid #ccc;

      .header_l {
        .header_nav {
          border-bottom: 3px solid transparent;
          line-height: 60px;
          margin-right: 20px;
          font-size: 18px;
        }

        .active_head_nav {
          border-color: var(--themeColor);
        }
      }

      .header_r {
        padding-bottom: 20px;

        .search_box {
          width: 150px;
          border-radius: 10px;
          overflow: hidden;
        }

        .fileStatus {
          width: 150px;
          margin-left: 10px;
          border-radius: 10px;
          overflow: hidden;
        }

        .fileViewTypes {
          padding: 4px;
          background: #6d69dc14;
          border-radius: 10px;
          margin-left: 10px;

          .fileViewType {
            padding: 10px 20px;
            border-radius: 8px;
          }

          .active_fileView {
            background: #fff;
            color: var(--themeColor);
          }
        }

        >.el-button {
          background: var(--themeColor);
          color: #fff;
          margin-left: 10px;
          border-radius: 10px;
        }
      }
    }

    .literature_table {
      // width: 100%;
    }
  }

  .literature_r {}
}
</style>